<template>
  <Card>
    <Menu
      mode="horizontal"
      theme="light"
      :active-name="activeMenu"
      @on-select="select"
    >
      <MenuItem name="1">
        <Icon type="ios-paper" />
        保证金设置
      </MenuItem>
      <MenuItem name="2">
        <Icon type="ios-people" />
        保证金列表
      </MenuItem>
    </Menu>
    <div v-if="activeMenu == '1'">
      <div class="m-2">
        <Form ref="setForm" :model="setForm" :rules="ruleValidate">
          <FormItem label="缴纳费用" prop="storeDeposit">
            <div class="f-row">
              <Input
                v-model="setForm.storeDeposit"
                placeholder="请输入金额"
                width="200px"
                type="number"
              ></Input>
              <div>元</div>
            </div>
          </FormItem>
          <FormItem label="保证周期" prop="cycle">
            <div>{{ setForm.cycle }}</div>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="save('setForm')">保存</Button>
          </FormItem>
        </Form>
      </div>
    </div>
    <div v-else>
      <div class="f-row m-2">
        <div class="f-row">
          <div class="serach-title">店铺名称</div>
          <Input
            v-model="searchForm.storeName"
            placeholder="请输入店铺名称"
            clearable
            style="width: 200px"
          />
        </div>
        <div class="f-row">
          <div class="serach-title">缴纳状态</div>
          <Select v-model="searchForm.storeBond" clearable style="width: 200px">
            <Option
              v-for="item in paymentState"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </div>
        <Button type="primary" @click="serachBtn">搜索</Button>
      </div>
      <Button type="primary" @click="batchProcessing">批量处理</Button>
      <Table
        :loading="loading"
        border
        :columns="columns"
        :data="data"
        ref="table"
        class="mt_10"
        @on-selection-change="changeSelect"
      >
      </Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page
          :current="paging.pageNumber"
          :total="paging.total"
          :page-size="paging.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
      <Modal
        v-model="modal"
        title="设置"
        @on-ok="ok"
        @on-cancel="modal = false"
      >
        <p>
          您确定设置{{
            currentShopData.storeName
          }}店铺缴纳金状态设置为“已缴纳”？
        </p>
      </Modal>
    </div>
  </Card>
</template>

<script>
import {
  shopList,
  setBond,
  seeBondState,
  setBondState,
} from "@/api/shopNewApi.js";
export default {
  data() {
    return {
      currentShopData: {},
      modal: false,
      loading: false,
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
          fixed: "left",
        },
        {
          title: "店铺名称",
          key: "storeName",
        },
        {
          title: "缴纳状态",
          render: (h, params) => {
            if (params.row.storeBond) {
              return (
                <Tag checkable color="primary">
                  已缴纳
                </Tag>
              );
            } else {
              return (
                <Tag checkable color="error">
                  未缴纳
                </Tag>
              );
            }
          },
        },
        {
          title: "操作",
          render: (h, params) => {
            if (!params.row.storeBond) {
              return [
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small",
                      ghost: true,
                    },
                    style: {
                      marginRight: "5px",
                    },
                    on: {
                      click: () => {
                        this.setting(params);
                      },
                    },
                  },
                  "缴纳"
                ),
              ];
            } else {
              return "";
            }
          },
        },
      ],
      data: [],
      setForm: {
        storeDeposit: 0, //费用
        cycle: "永久", //费用
      },
      ruleValidate: {
        storeDeposit: [
          { required: true, message: "请输入缴纳费用", trigger: "blur" },
        ],
        cycle: [{ required: true, message: "请选择保障周期", trigger: "blur" }],
      },
      activeMenu: "1",
      serachForm: {
        shopName: "",
        state: "",
      },
      paymentState: [
        {
          value: "0",
          label: "未缴纳",
        },
        {
          value: "1",
          label: "已缴纳",
        },
      ],
      paging: {
        pageSize: 10,
        pageNumber: 1,
        total: 0,
      },
      searchForm: {
        storeName: "",
        storeBond: "",
      },
      selectTabs: [], //选中的数据
    };
  },
  created() {
    this.getShopList();
    this.showDataDetail();
  },
  methods: {
    //查看保证金详情
    showDataDetail() {
      seeBondState().then((res) => {
        if (res.success) {
          this.$set(this.setForm, "storeDeposit", res.result.storeDeposit);
        }
      });
    },
    serachBtn() {
      this.paging.pageNumber = 1;
      this.paging.pageSize = 10;
      this.getShopList();
    },
    changePage(v) {
      // 改变页码
      this.paging.pageNumber = v;
      this.getShopList();
    },
    changePageSize(v) {
      // 改变页数
      this.paging.pageNumber = 1;
      this.paging.pageSize = v;
      this.getShopList();
    },
    //获取店铺分页列表
    getShopList() {
      shopList({
        storeName: this.searchForm.storeName,
        storeBond: this.searchForm.storeBond,
        pageSize: this.paging.pageSize,
        pageNumber: this.paging.pageNumber,
        isStoreBondList:true,
      }).then((res) => {
        if (res.success) {
          this.data = res.result.records;
          this.paging.total = Number(res.result.total);
        }
      });
    },
    //批量处理
    batchProcessing() {
      let ids = this.selectTabs.map((i) => i.id).toString();
      setBond(ids).then((res) => {
        if (res.success) {
          this.$Message.success("操作成功");
          this.modal = false;
          this.currentShopData = {};
          this.paging.pageNumber = 1;
          this.paging.pageSize = 10;
          this.getShopList();
        } else {
          this.$Message.error("操作失败，请重试！");
        }
      });
    },
    //查看
    see() {
      console.log("查看");
    },
    //已缴纳
    setting(e) {
      this.modal = true;
      this.currentShopData = e.row;
    },
    ok() {
      setBond(this.currentShopData.id).then((res) => {
        if (res.success) {
          this.$Message.success("操作成功");
          this.modal = false;
          this.currentShopData = {};
          this.paging.pageNumber = 1;
          this.paging.pageSize = 10;
          this.getShopList();
        } else {
          this.$Message.error("操作失败，请重试！");
        }
      });
    },
    changeSelect(e) {
      this.selectTabs = e;
    },
    //menu选择
    select(e) {
      this.activeMenu = e;
    },
    //保存保证金设置
    save(name) {
      if (!this.setForm.storeDeposit||this.setForm.storeDeposit<0) {
        this.$Message.error("请输入保证金金额！");
        return false;
      } else {
        setBondState({
          configValue:JSON.stringify({
          storeDeposit:this.setForm.storeDeposit,
        })
        }).then((res) => {
          if (res.success) {
            this.$Message.success("保存成功！");
            this.showDataDetail();
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .ivu-form-item-content .ivu-input-wrapper {
  width: 200px;
}
.f-row {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.m-2 {
  margin: 20px;
}
.serach-title {
  margin-right: 10px;
  width: 100px;
}
</style>